import React, { useState, useEffect, useCallback } from 'react'

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import DialogGeneralCategoriesData2 from "./DialogGeneralCategoriesData2"
import { useDropzone } from 'react-dropzone'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import 'react-dropzone-uploader/dist/styles.css'



//props.onOk(roiObj)
//props.onDrawPolygonClicked
//props.onDrawRectClicked
//props.currentRoiObject
//props.loginedUser
function DialogSelectRoi(props) {

    //系统ROI分类列表
    const [sysCats, setSysCats] = useState([]);
    //用于显示的分类列表 { catname:'' , }
    const [catCount, setCatCount] = useState(0);//syscats数量加上 4 （矩形，多边形，上传和用户）
    const [userData, setUserData] = useState([]);//用户ROI数据
    const [polyTextAreaValue, setPolyTextAreaValue] = useState("");//绘制多边形的textarea geojson字符串
    //矩形四角坐标
    const [rectTopValue, setRectTopValue] = useState(0);
    const [rectBottomValue, setRectBottomValue] = useState(0);
    const [rectLeftValue, setRectLeftValue] = useState(0);
    const [rectRightValue, setRectRightValue] = useState(0);
    //上传面板的提示信息
    const [uploadErrorMessage, setUploadErrorMessage] = useState("");
    const [uploadProgressMessage, setUploadProgressMessage] = useState("");
    //shp new name
    const [shpNewName, setShpNewName] = useState("");
    //保存矩形名称
    const [rectNewName, setRectNewName] = useState("");
    const [uploadRectBusy, setUploadRectBusy] = useState(false);
    //保存多边形名称
    const [polyNewName, setPolyNewName] = useState("");
    const [uploadPolyBusy, setUploadPolyBusy] = useState(false);

    const [searchKey, setSearchKey] = useState("");
    const [changeCatIndex, setChangeCatIndex] = useState(-1);
    const [searchData, setSearchData] = useState([]);


    //每页数量
    const pageSize = 20;


    //计算GeoJson四角范围，返回值[top,bottom,left,right]
    const computeGeoJSONExtent = function (gjson) {

        const gjsonObj = JSON.parse(gjson);
        const coorsArr = gjsonObj.geometry.coordinates;
        let res = [-999999, 999999, 999999, -999999];
        for (let icoor = 0; icoor < coorsArr.length; ++icoor) {
            const subCoors = coorsArr[icoor];
            for (let ipt = 0; ipt < subCoors.length; ++ipt) {
                res[0] = Math.max(res[0], subCoors[ipt][1]);
                res[1] = Math.min(res[1], subCoors[ipt][1]);
                res[2] = Math.min(res[2], subCoors[ipt][0]);
                res[3] = Math.max(res[3], subCoors[ipt][0]);
            }
        }
        return res;
    }



    //初始加载
    useEffect(() => {

        if (props.isOpen === true) {
            let tempCats = [];
            const url = global.g_serverAPIRoot + 'roi/cat';
            fetch(url).then(response => response.json()).then(
                (jsonData) => {
                    let catArr = jsonData.data;
                    for (let i = 0; i < catArr.length; ++i) {
                        catArr[i].ipage = 0;
                        httpLoadSysData(catArr[i].rcid, 0).then((items) => catArr[i].items = items);
                    }
                    httpLoadUserData();
                    setSysCats(catArr);
                    setCatCount(jsonData.data.length + 5);
                    if( changeCatIndex<0 ) setChangeCatIndex(0) ;
                }
            );
        }
    }, [props.isOpen]);


    //当前ROI变化
    useEffect(() => {
        let isSet = false;
        if (props.currentRoiObject !== null) {
            if (typeof (props.currentRoiObject.from) !== undefined) {
                isSet = true;
                if (props.currentRoiObject.from === 'rect') {
                    const tempExtent = computeGeoJSONExtent(props.currentRoiObject.geojson);
                    setRectTopValue(tempExtent[0].toFixed(5));
                    setRectBottomValue(tempExtent[1].toFixed(5));
                    setRectLeftValue(tempExtent[2].toFixed(5));
                    setRectRightValue(tempExtent[3].toFixed(5));

                } else if (props.currentRoiObject.from === 'poly') {
                    setPolyTextAreaValue(props.currentRoiObject.geojson);
                }
            }
        }
        if (isSet === false) {
            setPolyTextAreaValue("");
            setRectTopValue(0);
            setRectBottomValue(0);
            setRectLeftValue(0);
            setRectRightValue(0);
        }
    }, [props.currentRoiObject]);




    //多边形TextArea 内容变化
    const onPolyTextAreaChanged = function (e) {
        setPolyTextAreaValue(e.target.value);

    }

    //矩形Input 内容变化
    const onRectInputChanged = function (direction, e) {
        if (direction === 'top') {
            setRectTopValue(e.target.value);
        } else if (direction === 'bottom') {
            setRectBottomValue(e.target.value);
        } else if (direction === 'left') {
            setRectLeftValue(e.target.value);
        } else {
            setRectRightValue(e.target.value);
        }

    }


    //加载分类数据
    const httpLoadSysData = async function (rcid, offset) {
        const url = global.g_serverAPIRoot + 'roi/sys?cat=' + rcid + "&offset=" + offset;
        const response = await fetch(url);
        const jsonData = await response.json();
        return jsonData.data;
    }

    //加载用户数据
    const httpLoadUserData = async function () {
        const url = global.g_serverAPIRoot + 'roi/user?uid=' + props.loginedUser.uid;
        const response = await fetch(url);
        const jsonData = await response.json();
        setUserData(jsonData.data);
    }

    //加载搜索数据
    const httpLoadSearchData = function (keyval) {
        const url = global.g_serverAPIRoot + 'roi/seach?uid=' + props.loginedUser.uid
        +"&key="+keyval;
        fetch(url)  //GET
        .then(response=>response.json())
        .then(result => {
            console.log(result) ;
            setSearchData(result.data);
        }).catch(err=> {
            console.log(err) ;// 505 404 ... errors
        });
    }


    // Dropzone
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map(file => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));


    //换页
    const onChangeSysDataPage = function (catindex, ipageBasedOne) {
        const nPage = Math.ceil(sysCats[catindex].count / pageSize);
        if (ipageBasedOne < 0 || ipageBasedOne > nPage) return;

        let rcid = sysCats[catindex].rcid;
        const ipage = parseInt(ipageBasedOne);
        let offset = (ipage - 1) * pageSize;
        if (offset < 0) offset = 0;
        httpLoadSysData(rcid, offset).then(
            function (items) {
                let newSysCats = [...sysCats];
                newSysCats[catindex].items = items;
                newSysCats[catindex].ipage = ipage - 1;
                setSysCats(newSysCats);
                
            }
        );
    }


    // 保存Poly到我的 
    const onSavePolyToMy = function () {
        if (polyTextAreaValue.length > 0 && polyNewName.length > 0) {
            const url = global.g_serverAPIRoot + "roi/newgeojson";
            let formData = new FormData();
            formData.append("name", polyNewName);
            formData.append("uid", props.loginedUser.uid);
            formData.append("geojson", polyTextAreaValue);
            setUploadPolyBusy(true);
            fetch(url,
                {
                    method: 'POST',
                    body: formData
                }
            ).then(response => response.json()).then((result) => {
                setPolyNewName("");
                setUploadPolyBusy(false);
                httpLoadUserData();
            });
        }
    }

    // 保存Rect到我的
    const onSaveRectToMy = function () {
        const tt0 = parseFloat(rectTopValue);
        const tt1 = parseFloat(rectBottomValue);
        const tt2 = parseFloat(rectLeftValue);
        const tt3 = parseFloat(rectRightValue);
        if (tt0 > tt1 && tt2 < tt3 && tt0 >= -90 && tt0 <= 90 && tt1 >= -90 && tt1 <= 90 && tt2 > -180 && tt2 < 360 && tt3 > -180 && tt3 < 360 && rectNewName.length > 0) {
            const geojsonText = generateGeoJsonStrByRect(tt0, tt1, tt2, tt3);
            const url = global.g_serverAPIRoot + "roi/newgeojson";
            let formData = new FormData();
            formData.append("name", rectNewName);
            formData.append("uid", props.loginedUser.uid);
            formData.append("geojson", geojsonText);
            setUploadRectBusy(true);
            fetch(url,
                {
                    method: 'POST',
                    body: formData
                }
            ).then(response => response.json()).then((result) => {
                setRectNewName("");
                setUploadRectBusy(false);
            });
        }
    }

    //列表头渲染
    const renderCatContentHeader = function (catindex) {
        const sysCatLen = sysCats.length;
        if (catindex >= 0 && catindex < sysCatLen) {
            const nPage = Math.ceil(sysCats[catindex].count / pageSize);
            return (
                <div style={{ margin: '4px' }}>
                    <InputGroup size="sm" >
                        <Form.Control
                            type='number' size='sm'
                            value={sysCats[catindex].ipage + 1}
                            onChange={(e) => onChangeSysDataPage(catindex, e.target.value)}
                        />
                        <InputGroup.Text id="basic-addon2">/ 总{nPage}页</InputGroup.Text>
                    </InputGroup >
                </div>
            )
        }
        else if (catindex === sysCatLen) {
            // 多边形
            return (
                <div>
                    <div style={{ margin: "8px" }}>
                        <Button size='sm'
                            onClick={props.onDrawPolygonClicked}>在地图中绘制</Button>
                    </div>
                    <div style={{ backgroundColor: 'white', padding: '8px' }}>
                        <textarea rows={9} placeholder='GeoJson格式多边形数据'
                            style={{ width: '100%' }}
                            value={polyTextAreaValue} onChange={onPolyTextAreaChanged} />
                    </div>
                    <InputGroup style={{ backgroundColor: 'white', padding: '8px' }}>
                        <Form.Control size='sm'
                            placeholder='感兴趣区名称'
                            value={polyNewName}
                            onChange={(e) => setPolyNewName(e.target.value)} />
                        {
                            (uploadPolyBusy === true) ? (
                                <Button size='sm'>上传中...</Button>) : (
                                <Button color='yellow' size='sm'
                                    onClick={onSavePolyToMy}>保存到我的</Button>)
                        }
                    </InputGroup>
                </div>
            )
        }
        else if (catindex === sysCatLen + 1) {
            // 矩形
            return (
                <div>
                    <div style={{ margin: "8px" }}>
                        <Button size='sm'
                            onClick={props.onDrawRectClicked}>在地图中绘制</Button>
                    </div>
                    <Container>
                        <Row style={{ margin: "4px" }}>
                            <Col></Col>
                            <Col>
                                <InputGroup size='md' style={{ width: '200px' }}>
                                    <InputGroup.Text>最大纬度</InputGroup.Text>
                                    <Form.Control type='number' size='sm'
                                        value={rectTopValue}
                                        onChange={(e) => onRectInputChanged('top', e)} />
                                </InputGroup>
                            </Col>
                            <Col></Col>
                        </Row>
                        <Row style={{ margin: "4px" }}>
                            <Col>
                                <InputGroup size='md' style={{ width: '200px' }}>
                                    <InputGroup.Text>最小经度</InputGroup.Text>
                                    <Form.Control type='number' size='sm'
                                        style={{ width: '100px' }}
                                        value={rectLeftValue} onChange={(e) => onRectInputChanged('left', e)} />
                                </InputGroup>
                            </Col>
                            <Col>
                                <InputGroup size='md' style={{ width: '200px' }}>
                                    <InputGroup.Text>最大经度</InputGroup.Text>
                                    <Form.Control type='number' size='sm'
                                        style={{ width: '100px' }}
                                        value={rectRightValue} onChange={(e) => onRectInputChanged('right', e)} />
                                </InputGroup>

                            </Col>
                        </Row>
                        <Row style={{ margin: "4px" }}>
                            <Col></Col>
                            <Col>
                                <InputGroup size='md' style={{ width: '200px' }}>
                                    <InputGroup.Text>最小纬度</InputGroup.Text>
                                    <Form.Control type='number' size='sm'
                                        style={{ width: '100px' }}
                                        value={rectBottomValue} onChange={(e) => onRectInputChanged('bottom', e)} />
                                </InputGroup>
                            </Col>
                            <Col></Col>
                        </Row>
                        <Row><Col>&nbsp;</Col></Row>
                        <Row><Col>&nbsp;</Col></Row>
                    </Container>
                    <InputGroup style={{ backgroundColor: 'white', padding: '8px' }}>
                        <Form.Control size='sm'
                            placeholder='感兴趣区名称'
                            value={rectNewName}
                            onChange={(e) => setRectNewName(e.target.value)} />
                        {
                            (uploadPolyBusy === true) ? (
                                <Button size='sm'>上传中...</Button>) : (
                                <Button color='yellow' size='sm'
                                    onClick={onSaveRectToMy}>保存到我的</Button>)
                        }
                    </InputGroup>
                </div>
            )
        } else if (catindex === sysCatLen + 2) {
            // 上传
            return (
                <div>
                    <section style={{ backgroundColor: 'white', padding: '8px' }}>
                        <div {...getRootProps({})} >
                            <input {...getInputProps()} />
                            <p style={{ textAlign: 'center', padding: '20px', height: '100px', border: '2px dashed gray' }}>拖拽文件到这里，或者点击选择文件。请同时上传*.shp, *.shx, *.dbf, *prj四个文件。</p>
                        </div>
                        <aside>
                            <p>文件列表：</p>
                            <ul>{files}</ul>
                        </aside>
                        {
                            (uploadErrorMessage !== "") ? <div class="ui error message">{uploadErrorMessage}</div> : ""
                        }
                        {
                            (uploadProgressMessage !== "") ?
                                (<div class="ui icon message"><i aria-hidden="true" class="circle notched loading icon" style={{ fontSize: '1.5em' }}></i>{uploadProgressMessage}</div>) : ""
                        }
                    </section>
                    <div style={{ margin: "8px" }}>
                        <Form.Control size='sm'
                            placeholder='重命名感兴趣区名称'
                            style={{ width: '70%', marginRight: '10px' }}
                            value={shpNewName}
                            onChange={(e) => setShpNewName(e.target.value)} />
                    </div>
                </div>
            )
        }
    }

    //分类名称
    const getCatName = function (catindex) {
        const sysCatLen = sysCats.length;
        if (catindex >= 0 && catindex < sysCatLen) {
            return sysCats[catindex].name;
        } else if (catindex === sysCatLen) {
            return "多边形";
        } else if (catindex === sysCatLen + 1) {
            return "矩形";
        } else if (catindex === sysCatLen + 2) {
            return "上传";
        } else if (catindex===sysCatLen+3)
        {
            return "我的";
        }else {
            return "搜索结果";
        }
    }

    //获取分类数据数组
    const getCatData = function (catindex) {
        if (catindex >= 0 && catindex < sysCats.length) {
            if (typeof (sysCats[catindex].items) !== 'undefined')
                return sysCats[catindex].items;
            else return [];
        } else if (catindex === sysCats.length + 3) {
            return userData;
        } else if( catindex === sysCats.length+4 ){
            return searchData;
        }
        return [];
    }

    //删除我的ROI
    const onDeleteMyRoi = function (rid) {
        const url = global.g_serverAPIRoot + "roi/remove";
        let formData = new FormData();
        formData.append("rid", rid);
        fetch(url,
            {
                method: 'POST',
                body: formData
            }
        ).then(response => response.json()).then((result) => {
            httpLoadUserData();
        });
    }


    const onSearchFocus = function () {
        setChangeCatIndex( catCount -1 ) ;
    }

    const onSearchKeyChanged = function(ev) {
        setSearchKey(ev.target.value);
        let key1 = ev.target.value.trim() ;
        if( key1==="" ){
            setSearchData([]);
        }else {
            httpLoadSearchData(key1);
        }
    }

    //搜索对话框
    const renderSearchBar = function () {
        return (
            <Form.Control size='sm'
                placeholder='关键字搜索'
                style={{ marginTop:'2px',paddingLeft:'4px',
                height:'24px'}}
                value={searchKey}
                onChange={onSearchKeyChanged}
                onFocus={onSearchFocus}
            />
        )
}


//渲染单元格
const renderDataCell = function (catindex, dataindex) {
    if (catindex >= 0 && catindex < sysCats.length) {
        //system
        return (
            <div>
                <div style={{ fontSize: '16px' }}>{sysCats[catindex].items[dataindex].name} </div>
                <div style={{ color: 'gray', fontSize: '15px' }}>
                    {sysCats[catindex].items[dataindex].name2}
                    <span style={{ marginLeft: '8px', fontStyle: 'Italic' }}>sys:{sysCats[catindex].items[dataindex].rid}</span>
                </div>
            </div>
        );
    } else if (catindex === sysCats.length + 3) {
        //user
        return (
            <div>
                <div style={{ fontSize: '16px' }}>
                    {userData[dataindex].name}
                </div>
                <div style={{ color: 'gray', fontSize: '15px' }}>
                    创建时间:{userData[dataindex].ctime}
                    <span style={{ marginLeft: '8px', fontStyle: 'Italic' }}>user:{userData[dataindex].rid}</span>
                    <Button style={{marginRight:'64px',float:'right',width:'64px',padding:'1px'}}
                    variant="danger"
                    onClick={() => onDeleteMyRoi(userData[dataindex].rid)}
                    >
                    删除
                    </Button> 
                    <div style={{clear:'both'}}></div>
                </div>
            </div>
        );
    } 
    else if (catindex === sysCats.length + 4) {
        //search results
        return (
            <div>
                <div style={{ fontSize: '16px' }}>
                    {searchData[dataindex].name}
                </div>
                <div style={{ color: 'gray', fontSize: '15px' }}>
                    {searchData[dataindex].name2}
                </div>
            </div>
        );
    }
    else {
        return "";
    }

}


//上传shp文件
const handleFilesSubmission = () => {
    const formData = new FormData();
    formData.append('name', shpNewName);
    formData.append('uid', props.loginedUser.uid);
    formData.append('files', acceptedFiles[0]);
    formData.append('files', acceptedFiles[1]);
    formData.append('files', acceptedFiles[2]);
    formData.append('files', acceptedFiles[3]);
    const url = global.g_serverAPIRoot + "roi/upload"
    fetch(
        url,
        {
            method: 'POST',
            body: formData,
        }
    )
        .then((response) => response.json())
        .then((result) => {
            setUploadProgressMessage("");
            if (result.state === 0) {
                //good
                acceptedFiles.splice(0);
                setShpNewName("");
                props.onOk({ ...result.data, from: 'server' });
            } else {
                //bad
                setUploadErrorMessage(result.message);
            }
        });
};

//检查shp文件是否有效，检查通过返回空字符串，反正返回错误信息
const validateShpFiles = function (files) {
    if (files.length !== 4) {
        return "文件数量不为4个.";
    }
    let hasShp = false;
    let hasShx = false;
    let hasDbf = false;
    let hasPrj = false;
    acceptedFiles.map((file) => {
        if (file.name.includes('.shp') === true) hasShp = true;
        if (file.name.includes('.shx') === true) hasShx = true;
        if (file.name.includes('.dbf') === true) hasDbf = true;
        if (file.name.includes('.prj') === true) hasPrj = true;
    });
    let outmsg = "";
    if (hasShp === false) outmsg += "没有.shp文件;";
    if (hasShx === false) outmsg += "没有.shx文件;";
    if (hasDbf === false) outmsg += "没有.dbf文件;";
    if (hasPrj === false) outmsg += "没有.prj文件;";
    return outmsg;
}

//使用上下左右坐标新建矩形geojson 返回字符串格式geojson
const generateGeoJsonStrByRect = function (ttop, tbottom, tleft, tright) {
    let tstr = "{\"type\":\"Feature\",\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[";
    tstr += '[' + tleft + ',' + tbottom + '],';
    tstr += '[' + tright + ',' + tbottom + '],';
    tstr += '[' + tright + ',' + ttop + '],';
    tstr += ' [' + tleft + ',' + ttop + '],';
    tstr += ' [' + tleft + ',' + tbottom + ']';
    tstr += "]]},\"properties\":null}";
    return tstr;
}


//点击确定
const onOkCallback = function (catindex, dataindex) {
    if (catindex >= 0 && catindex < sysCats.length) {
        //system
        if (dataindex >= 0 && dataindex < sysCats[catindex].items.length) {
            props.onOk({ ...sysCats[catindex].items[dataindex], from: 'server' });
        }
    } else if (catindex === sysCats.length + 3) {
        //user
        if (dataindex >= 0 && dataindex < userData.length) {
            props.onOk({ ...userData[dataindex], from: 'server' });
        }
    }
    else if (catindex === sysCats.length + 4) {
        //search
        if (dataindex >= 0 && dataindex < searchData.length) {
            props.onOk({ ...searchData[dataindex], from: 'server' });
        }
    }
    else if (catindex === sysCats.length) {
        //多边形
        if (polyTextAreaValue.length > 0) {
            if (props.currentRoiObject !== null && props.currentRoiObject.from === 'poly') {
                let newRoiObj = { ...props.currentRoiObject };
                newRoiObj.geojson = polyTextAreaValue;
                props.onOk(newRoiObj);
            }
            else {
                let newRoiObj = {};
                newRoiObj.rid = 0;
                newRoiObj.geojson = polyTextAreaValue;
                newRoiObj.from = "poly";
                global.g_temporyRoiIndex = global.g_temporyRoiIndex + 1;
                const tname = "临时感兴趣区" + global.g_temporyRoiIndex.toString();
                newRoiObj.name = tname;
                props.onOk(newRoiObj);
            }
        }
    } else if (catindex === sysCats.length + 1) {
        //矩形
        const tt0 = parseFloat(rectTopValue);
        const tt1 = parseFloat(rectBottomValue);
        const tt2 = parseFloat(rectLeftValue);
        const tt3 = parseFloat(rectRightValue);
        if (tt0 > tt1 && tt2 < tt3 && tt0 >= -90 && tt0 <= 90 && tt1 >= -90 && tt1 <= 90 && tt2 > -180 && tt2 < 360 && tt3 > -180 && tt3 < 360) {
            if (props.currentRoiObject !== null && props.currentRoiObject.from === 'rect') {
                let newRoiObj = { ...props.currentRoiObject };
                newRoiObj.geojson = generateGeoJsonStrByRect(tt0, tt1, tt2, tt3);
                props.onOk(newRoiObj);
            }
            else {
                let newRoiObj = {};
                newRoiObj.rid = 0;
                newRoiObj.geojson = generateGeoJsonStrByRect(tt0, tt1, tt2, tt3);
                newRoiObj.from = "rect";
                global.g_temporyRoiIndex = global.g_temporyRoiIndex + 1;
                const tname = "临时感兴趣区" + global.g_temporyRoiIndex.toString();
                newRoiObj.name = tname;
                props.onOk(newRoiObj);
            }
        }
    } else if (catindex === sysCats.length + 2) {
        //上传
        const outmsg = validateShpFiles(acceptedFiles);
        if (outmsg === "") {
            //pass validate shp, go to submitting
            setUploadErrorMessage("");
            setUploadProgressMessage("上传中...");
            handleFilesSubmission();//异步上传任务 上传完成后调用 props.onOk 方法
        } else {
            //show error messages
            setUploadErrorMessage(outmsg);
            setUploadProgressMessage("");
        }
    }
}


//点击取消 做一些处理然后再调用 props.onCancel
const onCancel = function () {
    setUploadProgressMessage("");
    setUploadErrorMessage("");
    acceptedFiles.splice(0);
    props.onCancel();
}

const onCatChanged = function(newCatIndex){
    setChangeCatIndex(newCatIndex);
}

return (
    //props.isOpen
    //props.dialogTitle
    //props.catCount
    //props.getCatName(catindex)  //获取分类名称，字符串
    //props.renderCatContentHeader(catindex) //渲染顶部内容
    //props.getCatData(catindex)  //返回该分类下的数据数组，如果没有数据可以返回一个空数组 []
    //props.renderDataCell(catIndex,dataIndex,data1)
    //props.onOk( currentCatIndex , currentDataIndex )
    //props.onCancel()
    <DialogGeneralCategoriesData2
        isOpen={props.isOpen}
        dialogTitle={"选择感兴趣区"}
        catCount={catCount}
        getCatName={getCatName}
        renderCatContentHeader={renderCatContentHeader}
        getCatData={getCatData}
        renderDataCell={renderDataCell}
        onOk={onOkCallback}
        onCancel={onCancel}
        renderSearchBar={renderSearchBar}
        changeCatIndex={changeCatIndex}
        onCatChanged={onCatChanged}
    />
);
}

export default DialogSelectRoi;
